<template>
  <div class="home">
    <Button>测试</Button>

    <div class="view-wrapper">
      <RecycleList
        class="list"
        :infinite="infinite"
        :size="size"
        :on-fetch="onFetch"
      >
        <template slot="tombstone">
          <div class="item tombstone">
            <div class="tempBox"></div>
          </div>
        </template>
        <template slot="item" slot-scope="{ data }">
          <div :id="data.id" class="item" @click="handleClick(data)">
            <div class="bubble">
              <div class="msg oneRow">{{ data.msg }}</div>
              <div class="meta">
                <time class="posted-date">{{ data.time }}</time>
              </div>
            </div>
          </div>
        </template>
      </RecycleList>      
    </div>
  </div>
</template>

<script>
import { Button, RecycleList } from "cube-ui";
import Mock from "@/data/messages";
export default {
  name: "Home",
  data() {
    return {
      // data
      initTime: new Date().getTime(),
      id: 0,
      size: 10,
      infinite: true,
    };
  },
  mounted() {
    console.log(process.env.NODE_ENV)
    console.log(process.env.VUE_APP_URL)
  },
  components: {
    Button,
    RecycleList,
  },
  methods: {
    getItem(id) {
      const msg =
        Mock.messages[Math.floor(Math.random() * Mock.messages.length)];
      return {
        id,
        msg: msg,
        time: new Date(
          Math.floor(
            this.initTime +
              id * this.size * 1000 +
              Math.random() * this.size * 1000
          )
        ).toString(),
      };
    },
    onFetch() {
      let items = [];
      return new Promise((resolve) => {
        setTimeout(() => {
          for (let i = 0; i < this.size; i++) {
            items.push(this.getItem(this.id++));
          }
          resolve(items);
        }, 1000);
      });
    },
    handleClick(data) {
      console.log(data);
    },
  },
};
</script>

<style lang="scss">
.view-wrapper {
  position: fixed;
  top: 54px;
  left: 0;
  bottom: 0;
  width: 100%;

}

.list {
  width: 375px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  // border: 1px solid #ddd;
  list-style-type: none;
  // text-align: center;
  .item {
    display: flex;
    padding: 10px 10px;
    box-sizing: border-box;
    width: 345px;
    height: 100px;
    margin: 20px 0 0 15px;
    text-align: left;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    background-color: #fff;
    .bubble {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .posted-date {
      font-size: 12px;
      color: #ccc;
    }
    &.tombstone {
      width: 375px;
      height: 100px;
      margin: 20px auto 0;
      background-color: transparent;
      box-shadow: none;
      .tempBox {
        width: 345px;
        margin: 0 auto;
        height: 100px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        background-color: #f1f3f4;
      }
    }
  } 
}

.oneRow {
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;  
}
</style>
